<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>8.Vue.extend的简写形式</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			.app {
				background-color: gray;
				padding: 20px;
			}
			.hello {
				background-color: orange;
				padding: 20px;
			}
			.school{
				background-color: purple;
				padding: 20px;
			}
			.person{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			
			const Person = {
				name:'Person',
				template:`
					<div class="person">
						<h2>人员信息</h2>	
						<h3>姓名：{{name}}</h3>
						<h3>年龄：{{age}}</h3>
						<button @click="showPersonInfo">点我提示信息</button>
					</div>
				`,
				data(){
					return {
						name:'张三',
						age:98
					}
				},
				methods:{
					showPersonInfo(){
						console.log('@@@@',this)
						alert(this.name+this.age)
					}
				}
			}

			const School = {
				name:'School',
				template:`
					<div class="school">
						<h2>学校信息</h2>	
						<h3>名：尚硅谷</h3>
						<h3>地址：宏福科技园</h3>
					</div>
				`,
			}

			const Hello = {
				name:'Hello',
				template:`<h1 class="hello">你好</h1>`
			}

			const App = {
				name:'App',
				components:{Person,School,Hello},
				template:`
					<div class="app">
						<Person></Person>
						<hr>
						<School></School>
						<hr>
						<Hello></Hello>
					</div>
				`,
			}

			new Vue({
				el:'#demo',
				components:{App},
				template:`<App></App>`
			})
		</script>
	</body>
</html>